/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, ScrollView, View, Dimensions, TouchableOpacity, getSize, Image } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Toast, SearchBar, Carousel } from 'antd-mobile-rn';
import { ListItem, CheckBox, Body, List, Button, Icon, Text, Content } from 'native-base';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';

/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class ProductList extends ScreenBase {
    constructor(props) {
        super(props);
        
		this.shareImageArray = [];	// 所有分享图片的url地址数组
		this.shareImageSaved = 0;	// 已经保存好了多少张图片到相册
		this.shareImageIndex = 0;	// 最后一次已保存图片的索引
		this.shareImageDownloading = false; // 线程保护

		/**
		 * state
		 */
		this.state = {
			// 商品id
			id: 0,

			// 商品详情
			detail: {
                set_price:30,
                set_original_price:10,
                is_collect:0,
                set_name:'没写名字名字名字名字名字名字名字没怎么这么怎么没写名字名字名字名字名字名字名字没怎么这么怎么',

                object:{
                    set_image_big:[
                        'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg',
                        'http://image.cdn.hesq.com.cn/rushbuy/banner/20181114/1542160013858bsnl.jpg',
                        'http://image.cdn.hesq.com.cn/rushbuy/banner/20181114/1542160013858bsnl.jpg',
                        'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg',
                    ],
                    set_detail:'详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情详情',
                    set_faq:'问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题问题'
                }
            },

			// 商品评论
			comment: {},

			// 评论数量，图片
			comment_image_count: 0,
			comment_total_count: 0,

			// recommend商品推荐
			recommend: [
                {
                    id:0,
                    set_name:'名字名字没怎么这么怎么没怎么这么怎么怎么怎么这么',
                    set_price:20,
                    set_original_price:8,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                },
                {
                    id:0,
                    set_name:'名字名字没怎么这么怎么没怎么这么怎么怎么怎么这么',
                    set_price:20,
                    set_original_price:8,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                },
                {
                    id:0,
                    set_name:'名字名字没怎么这么怎么没怎么这么怎么怎么怎么这么',
                    set_price:20,
                    set_original_price:8,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                },
                {
                    id:0,
                    set_name:'名字名字没怎么这么怎么没怎么这么怎么怎么怎么这么',
                    set_price:20,
                    set_original_price:8,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                },
                {
                    id:0,
                    set_name:'名字名字没怎么这么怎么没怎么这么怎么怎么怎么这么',
                    set_price:20,
                    set_original_price:8,
                    object:{
                        set_image_small:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg'
                    },
                }
            ],

			// tab 默认
			index: 0,

			// 用户信息
			userInfo: {},

			//商品件数
			buycount:1,

			// 计算的高度值，赋给swiper
            width: '100%',
            height: 200, 

			// 控制推广分享弹框显示隐藏
			shareBool: false,
			// 分享中带的 上级用户id
            dist_id: 0,
			detailActive:[
                {
                    color:'#f3202f',
                    borderBottomColor:'#f3202f',
                    borderBottomWidth:2,
                    height:'100%',
                    fontSize:13,
                    lineHeight:50
                },
                {
                    color:'#333',
                    borderBottomColor:'transparent',
                    borderBottomWidth:2,
                    height:'100%',
                    fontSize:13,
                    lineHeight:50
                }
            ],
		}
    }

    componentDidMount() {
        let screenWidth = Dimensions.get('window').width;
        let screenHeight = Dimensions.get('window').height;
        Image.getSize(this.state.detail.object.set_image_big[0], (width, height) => {
            let myHeight = Math.floor(screenWidth/width*height);
            this.setState({ height:myHeight});
        });
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    // onTabClick tab 点击
	onTabClick = (index, e)=> {
		this.setState({
			index: index
		},()=>{alert(this.state.index)})
    }
    
    // sub 数量减
	sub = (e)=> {
		if(this.state.buycount == 1){
			Toast.info("商品数量不能小于1件");
			return;
		}
		this.setState({
			buycount:this.state.buycount - 1
		})
	}

	// add 数量加
	add = (e)=> {
		this.setState({
			buycount:this.state.buycount + 1
		})
	}

    //关注或者取消关注
	collect = (e)=>{
        this.state.is_collect && Toast.info('取消关注成功');
        !this.state.is_collect && Toast.info('关注成功');
        this.state.is_collect != this.state.is_collect;
        this.setState({

        })
    }
    
    //加入购物车
	subCart(){
        Toast.info('加入购物车')
    }
    
    // 获取图片宽高
    getHeight = (item, index, e) => {

        
        // Image.getSize({
        //     uri:item, 
        //     success:(width, height) => {
        //         let myHeight = Math.floor(screenWidth/width*height);
        //         this.setState({ height:myHeight});
        //     }
        // });
    }
    
	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		// const shareImage = this.state.detail.object.set_image_share;
		const save = (this.state.detail.set_original_price - this.state.detail.set_price).toFixed(2)
		const earn = (this.state.detail.set_price * this.state.detail.set_commission_percent / 100).toFixed(2)
		return (
			<CPage>
				<CContent mb='90' bg='#f2f2f2'>
					
					{/* 轮播图 */}
                    <Carousel
                        autoplay={true}
                        infinite
                        dotStyle={{backgroundColor:'rgba(255,255,255,.5)',width:6,height:6}}
                        dotActiveStyle={{backgroundColor:'rgba(0,0,0,.5)'}}
                    >
                        {
                            this.state.detail.object.set_image_big.map( (item,index) => {
                                return(
                                    <View >
                                        <CImage source={{uri:item}} style={{width:this.state.width, height: this.state.height}}  />
                                    </View>
                                )
                            })
                        }
                    </Carousel>
                    {/* onLoad={_=>this.getHeight(item,index,this)} */}

					{/* 价格与关注 */}
					<CBetween pa='30 40' pb='25' bg='#fff'>
						<CItemY x='left'>
							<CItemX y='center'>
								<CHand y='center' x='center'>
									<CText size='30' color='#d9000d' mt='12' bold>￥</CText>
									<CText size='40' color='#d9000d' ml='4' bold>{this.state.detail.set_price}</CText>
								</CHand>
								<CText bg='#fee0e0' size='23' ra='100' color='#f92530' px='10' ml='20'>促销价</CText>
							</CItemX>
							<CItemX y='center' mt='8'>
								<CText color='#8b8b8b' size='24'>价格:</CText>
								<CText size='24' ml='10' class='del'>￥{this.state.detail.set_original_price}</CText>
							</CItemX>
						</CItemY>
						<CItemY onPress={ _=>this.collect(this) }>
							{ this.state.detail.is_collect ?
							<CItemY x="center" >
                                <CIcon icon={Licon.heart} w='30' h='30' color='#d9000d' />
								<CText size='20' color='#4d4d4d'>已关注</CText>
							</CItemY>
							: 
							<CItemY x="center">
                                <CIcon icon={Licon.follow} w='34' h='34' color='#d9000d' />
								<CText size='20' color='#4d4d4d'>关注</CText>
							</CItemY>
							}
						</CItemY>
					</CBetween>

					{/* 商品名称 */}
					<CText px='30' size='27' pb='20' bg='#fff' bold color='#5c5c5c'>{this.state.detail.set_name}</CText>


					{/* 24小时发货、交易保障、7天退换货 */}
					<CBetween mt='20' pa='20 30' bg='#fff'>
						<CItemX y='center'>
							<CIcon w='50' h='50' color='#d01f1f' icon={Licon["service-modal"]} />
							<CText size='23' color='#8b8b8b' pl='4'>24小时发货</CText>
						</CItemX>
						<CItemX y='center'>
							<CIcon w='50' h='50' color='#d01f1f' icon={Licon["service-modal"]} />
							<CText size='23' color='#8b8b8b' pl='4'>交易保障</CText>
						</CItemX>
						<CItemX y='center'>
							<CIcon w='50' h='50' color='#d01f1f' icon={Licon["service-modal"]} />
							<CText size='23' color='#8b8b8b' pl='4'>7天退换货</CText>
						</CItemX>
					</CBetween>

					{/* 为你推荐 */}
					<CColumn bg='#fff' mt='20' pa='20'>
						<CCenter align='center' style={{width:'100%'}} py='10'>
							<CText color='#e33f3e' size='26'>为你推荐</CText>
						</CCenter>

						<ScrollView horizontal style={{width: '100%', height: 150}}>
							<CAround pt='20' x='left'>
								{this.state.recommend.map(product => {
									let url = '/screen/product/detail?id=' + product.id;
									let image = product.object.set_image_small;
									let name = product.set_name;
									if (name.length > 13) {
										name = name.substr(0, 13) + '...';
									}
									return(
										<TouchableOpacity onPress={_=>Toast.info(url)}>
											<CColumn mx='20'>
                                                <CHand w='170' h='170'>
												    <CImage style={{width:80, height:80}} resizeMode='contain' source={{uri:image}} />
                                                </CHand>
												<CItemY x='center' w='170'>
													<CText size='20' color='#797979'>{name}</CText>
													<CText size='22' color='#2e2e2e' mt='6'>￥{product.set_price}</CText>
													<CText size='18' color='#989898' style={{textDecorationLine: 'line-through'}}>￥{product.set_original_price}</CText>
												</CItemY>
											</CColumn>
										</TouchableOpacity>
									)
								})}
							</CAround>
						</ScrollView>
					</CColumn>

					{/* 商品详情、常见问题 tab */}
					<CAround bg='#fff' h='100' mt='20' bb='1 solid #eee'>
                        {
                            this.state.index == 0 ? <Text style={this.state.detailActive[0]} onPress={_=>this.onTabClick(0)}>商品详情</Text> : <Text style={this.state.detailActive[1]} onPress={_=>this.onTabClick(0)}>商品详情</Text>
                        }
                        {
                            this.state.index == 1 ? <Text style={this.state.detailActive[0]} onPress={_=>this.onTabClick(1)}>常见问题</Text> : <Text style={this.state.detailActive[1]} onPress={_=>this.onTabClick(1)}>常见问题</Text>
                        }
					</CAround>
                    
					{
                        this.state.index ? (
                            <CColumn bg='#fff' px='15' pt='10' pb='150'>
                                <CText size='22'>{this.state.detail.object.set_detail}</CText>
                            </CColumn>
                        ) : (
                            <CColumn bg='#fff' px='15' pt='10' pb='150'>
                                <CText size='22'>{this.state.detail.object.set_faq}</CText>
                            </CColumn>
                        )
                    }
					
				</CContent>

                {/* 顶部 star */}
                <CHeader h='90' y='center' bg='transparent' style={{ borderBottomColor:"transparent", borderBottomWidth:1 }}>
                    <CBetween h='90' px='10' bg='transparent' style={{width:'100%'}}>
                        <CHand bg='rgba(0,0,0,.5)' pa='12' ra='50'>
                            <CIcon color="#fff" w='28' h='28' icon={ Licon.gobcak }></CIcon>
                        </CHand>
                        <CText size='30' color='#000'></CText>
                        <CText></CText>
                    </CBetween>
                </CHeader>
                {/* 顶部 star */}

				{/* 商品详情页Footer */}
				<CFooter h='90' bg='#fff' bt='1 solid #eee'>
					<CBetween>
						<CHand df h='100' y='center' pl='15' mr='20' onPress={_=>Toast.info('跳转至购物车')} >
                            <CIcon icon={Licon["shop-gouwche"]} color='#737373' w='50' h='50' />
						</CHand>
                        <CLine x='right' f='1'>
                            <CAround f='3' h='90' x="right" y='center' pr='40'>
                                <CHand onPress={_=>this.sub()}>
                                    <CIcon icon={ Licon.sub } color='#d53b31' w='30' h='30'></CIcon>
                                </CHand>
                                <CText size='26' mx='15'>{ this.state.buycount }</CText>
                                <CHand onPress={_=>this.add()}>
                                    <CIcon icon={ Licon.add } color='#d53b31' w='30' h='30'></CIcon>
                                </CHand>
                            </CAround>
                            <CText f='6' h='100' lh='100' bg='#f5a915' color='#fff' size='28' style={{textAlign:'center'}} onPress={_=>this.subCart()}>加入购物车</CText>
                        </CLine>
					</CBetween>
				</CFooter>
			</CPage>
		)
	}
}
